<template>
	<view>
		<navigation  title="物品领用"></navigation>
		<view class="detail_box">
			<view class="top_box">
				<view class="left">
					<image src="" mode=""></image>
				</view>
				<view class="right">
					<text class="name">张茹茹</text>
					<text class="status">等待我审批</text>
				</view>
			</view>
			<view class="list_box">
				<view class="list">
					<text class="name">审批编号</text>
					<text class="content">我是审批编号</text>
				</view>
				<view class="list">
					<text class="name">所在部门</text>
					<text class="content">我是所在部门</text>
				</view>
				<view class="list">
					<text class="name">物品用途</text>
					<text class="content">日常</text>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="line"></view>
		<view class="project_box">
			<view class="people">
				   <view class="pic">
						<image src="" mode=""></image>
					</view>
					<view class="con">
						<text class="txt1">发起申请</text>
						<view class="txt2">
							<text>人名</text>
						
						</view>
					</view>
				<view class="time">05.01 14:20</view>
			</view>
			<view class="people">
				   <view class="pic">
						<image src="" mode=""></image>
					</view>
					<view class="con">
						<text class="txt1">审批人</text>
						<view class="txt2">
							<text>人名(审批中)</text>
						
						</view>
					</view>
				<view class="time">05.01 14:20</view>
			</view>
			<view class="people">
				   <view class="pic">
						<image src="" mode=""></image>
					</view>
					<view class="con">
						<text class="txt1">审批人</text>
						<view class="txt2">
							<text>人名(已通过)</text>
						
						</view>
					</view>
				<view class="time">05.01 14:20</view>
			</view>
			<view class="people">
				   <view class="pic">
						<image src="" mode=""></image>
					</view>
					<view class="con">
						<text class="txt1">审批人</text>
						<view class="txt2">
							<text>人名(已拒绝)</text>
						    <text>“我是拒绝理由我是拒绝理由我是拒绝理由我是拒绝理由”</text>
							<image src="../../../../static/add.png" mode=""></image>
							<image src="../../../../static/add.png" mode=""></image>
							<image src="../../../../static/add.png" mode=""></image>
							<image src="../../../../static/add.png" mode=""></image>
						</view>
					</view>
				<view class="time">05.01 14:20</view>
			</view>
		</view>
		
		<!-- 底部选择 -->
		<view class="btn_box">
			<view class="box" @click="jumpComment">
				<image src="../../../../static/approval/comment.png" mode=""></image>
			    <text>评论</text>
			</view>
			<view class="box">
				<image src="../../../../static/approval/submit.png" mode=""></image>
			    <text>撤销</text>
			</view>
			<view class="box">
				<image src="../../../../static/approval/clears.png" mode=""></image>
			    <text>再次提交</text>
			</view>
			<view class="btn">
				<button @click="jumpRefuse" class="refuse" type="default">拒绝</button>
				<button class="agree" type="default">同意</button>
			</view>
		</view>
	</view>
</template>

<script>
	import navigation from '@/component/navigation.vue'
	export default {
		components:{
			navigation
		},
		data() {
			return {
				
			}
		},
		methods: {
			//拒绝
			jumpRefuse(){
				uni.navigateTo({
					url:'../refuseApproval/refuseApproval'
				})
			},
			//评论
			jumpComment(){
				uni.navigateTo({
					url:'../comment/comment'
				})
			}
		}
	}
</script>

<style lang="less">
page{
	background:rgba(246,246,246,1);
	padding-bottom: 150upx;
}
.detail_box{
	width: 100%;
	height: auto;
	background: #FFFFFF;
}
.detail_box .top_box{
	width: 100%;
	height: auto;
	padding: 20upx 32upx 27upx 32upx;
	box-sizing: border-box;
	display: flex;
	border-bottom: 1upx solid #EEEEEE;
	.left{
		width: 86upx;
		height: 86upx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background:rgba(216,216,216,1);
		}
	}
	.right{
		width: auto;
	    padding-left: 16upx;
		box-sizing: border-box;
		text{
			width: auto;
			display: block;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
		}
		.name{
			font-size:34upx;
			color:rgba(51,51,51,1);
		}
		.status{
			font-size:26upx;
			color:rgba(102,102,102,1);
		}
	}
}
.detail_box .list_box{
	width: 100%;
	padding: 24upx 32upx 32upx 40upx;
	box-sizing: border-box;
	.list{
		width: 100%;
		margin-bottom: 24upx;
		text{
			width: auto;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
		}
		.name{
			font-size:30upx;
			color:rgba(153,153,153,1);
		}
		.content{
			font-size:30upx;
			color:rgba(51,51,51,1);
			margin-left: 24upx;
		}
	}
}
.line{
	width:100%;
	height:16upx;
	background:rgba(246,246,246,1);
}
.project_box{
	width: 100%;
	height: auto;
	background: #FFFFFF;
	padding: 40upx 32upx;
	box-sizing: border-box;
	position: relative;
}
.people{
		width: 100%;
		display: flex;
		position: relative;
		.pic{
				width: 86upx;
				height: 86upx;
				position: absolute;
				z-index: 5;
				image{
					width: 100%;
					height: 100%;
					background:rgba(216,216,216,1);
					border-radius: 50%;
				}
			}
			.con{
				width: auto;
				margin-left: 43upx;
				text{
					width: auto;
					display: block;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					padding-left: 76upx;
					box-sizing: border-box;
				}
				.txt1{
					font-size:34upx;
					color:rgba(51,51,51,1);
				}
				.txt2{
					width: 100%;
					padding-left: 76upx;
					box-sizing: border-box;
					min-height: 102upx;
					font-size:28upx;
					color:rgba(102,102,102,1);
					border-left: 4upx solid #D3D3D3;
					text{
						padding-left: 0;
						display: block;
					}
					image{
						width: 100upx;
						height: 100upx;
						border-radius: 0;
						margin-top: 10upx;
						margin-right: 20upx;
					}
					
				}
			}
			.time{
				min-width: 136upx;
				height: auto;
				position: absolute;
				right: 32upx;
				font-size:24upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
			}
	}
.people:last-child .con .txt2{
	font-size:28upx;
	color:rgba(102,102,102,1);
	border-left: none;
}
//底部选择
.btn_box{
	width: 100%;
	height: 120upx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #FFFFFF;
	border-top: 1upx solid #EEEEEE;
	z-index: 5;
	display: flex;
	box-sizing: border-box;
	justify-content: space-around;
	align-items: center;
}
.btn_box .box{
	min-width:44upx;
	text-align: center;
	image{
		width: 44upx;
		height: 44upx;
	}
	text{
		font-size:22upx;
		color:rgba(102,102,102,1);
		display: block;
	}
}
.btn_box .btn{
	width: auto;
	display: flex;
	button{
		width:195upx;
		height:72upx;
		border-radius:5upx 0upx 0upx 5upx;
		border:1upx solid rgba(208,220,255,1);
		font-size:32upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		line-height: 72upx;
	}
	.refuse{
		background: #FFFFFF;
		color:rgba(64,108,235,1);
	}
	.agree{
		background:rgba(64,108,235,1);
		color:rgba(255,255,255,1);
	}
}
</style>
